<div>
	<br />
	<?php
		  echo "&nbsp;<label>Staff</label> &nbsp;";
		  
		  // Fill staff list
		  $query = "SELECT Staff_ID, FullName FROM Staff";
		  
		  if($result = mysql_query($query))
		  {
		    if($success = mysql_num_rows($result) > 0)
		    {
		      echo "<select id='staffList' name='staffList'>\n";
		      echo "<option selected='selected'></option>\n";
		    
		      $result = mysql_query($query);
		      while ($row = mysql_fetch_array($result))
		      {
		        $Id = $row['Staff_ID'];
		        $name = $row['FullName'];
		        echo "<option value='$Id'>$Id - $name</option>\n";
		      }
		      echo "</select>\n";
			}
		  }
		  //echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
	?>
	<!--<select id="courseNameList"></select>-->
</div>
<div>
	<br />&nbsp;
	<label>From date</label>&nbsp;
	<input type="text" name="fromDate" id="fromDate" class="date"/>
	<label>&nbsp;&nbsp;To date&nbsp;</label>
	<input type="text" name="toDate" id="toDate" class="date"/>
	<button id='viewTrainingButton' class="ui-datepick-input">View training</button>
</div>
<br />
<div id="example_wrapper" class="dataTables_wrapper" role="grid">
	<table cellpadding="0" cellspacing="0" border="0" id="example" class='display dataTable'>
	<thead>
		<tr>
			<th width="4%">Staff ID</th>
			<th width="8%">Department</th>
			<th width="15%">Section</th>
			<th width="8%">Last Name</th>
			<th width="8%">First Name</th>
			<th width="8%">Position</th>
			<th width="8%">Training Mode</th>
			<th width="8%">Course Name</th>
			<th width="8%">Training Provider</th>
			<th width="8%">Course Date</th>
			<th width="8%">Duration (hr)</th>
			<th width="8%">Tranining Archivement</th>
			<!--<th width="4%"></th>-->
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="5" class="dataTables_empty">Loading data from server</td>
		</tr>
	</tbody>
</table>
</div>

<script>
	// Min date for filter
	var minDateFilter;
	// Max date for filter
	var maxDateFilter;
	
	// Range filter API of Datatables.net  
	$.fn.dataTableExt.afnFiltering.push(
	  function( oSettings, aData, iDataIndex ) {
	  	var min = 0;
	  	var max = 0;
	    if ( typeof aData._date == 'undefined' ) {
	      //aData._date = new Date(aData[9]).getTime();
	      min = new Date(aData[9]).getTime();
	      max = new Date(aData[10]).getTime();
	      //alert(max);
	    }
	    
		if (minDateFilter && !isNaN(minDateFilter) ) {
			if ( min < minDateFilter ) {
				return false;
			  }
			}
		if ( maxDateFilter && !isNaN(maxDateFilter) ) {
		  if ( max > maxDateFilter ) {
			return false;
		  }
		}
		return true;
	  }
	);
	
	// Init Datatables
	$(document).ready(function() {
						oTable = $('#example').dataTable( {
							"bJQueryUI": true,
                    		"sPaginationType": "full_numbers",
							//"bProcessing": true,
							"sAjaxSource": '<?php echo base_url()?>training/viewindividual',
							//"bStateSave": true,			        
							"bScrollCollapse": true
							
						});
		});
	
	// Jquery Autocomplete Combobox
	(function( $ ) {
		$.widget( "ui.combobox", {
			_create: function() {
				var input,
					self = this,
					select = this.element.hide(),
					selected = select.children( ":selected" ),
					value = selected.val() ? selected.text() : "",
					wrapper = this.wrapper = $( "<span>" )
						.addClass( "ui-combobox" )
						.insertAfter( select );

				input = $( "<input>" )
					.appendTo( wrapper )
					.val( value )
					.addClass( "ui-state-default ui-combobox-input" )
					.autocomplete({
						delay: 0,
						minLength: 0,
						source: function( request, response ) {
							var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
							response( select.children( "option" ).map(function() {
								var text = $( this ).text();
								if ( this.value && ( !request.term || matcher.test(text) ) )
									return {
										label: text.replace(
											new RegExp(
												"(?![^&;]+;)(?!<[^<>]*)(" +
												$.ui.autocomplete.escapeRegex(request.term) +
												")(?![^<>]*>)(?![^&;]+;)", "gi"
											), "<strong>$1</strong>" ),
										value: text,
										option: this
									};
							}) );
						},
						select: function( event, ui ) {
							ui.item.option.selected = true;
							self._trigger( "selected", event, {
								item: ui.item.option
							});
						},
						change: function( event, ui ) {
							if ( !ui.item ) {
								var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
									valid = false;
								select.children( "option" ).each(function() {
									if ( $( this ).text().match( matcher ) ) {
										this.selected = valid = true;
										return false;
									}
								});
								if ( !valid ) {
									// remove invalid value, as it didn't match anything
									$( this ).val( "" );
									select.val( "" );
									input.data( "autocomplete" ).term = "";
									return false;
								}
							}
						}
					})
					.addClass( "ui-widget ui-widget-content ui-corner-left" );

				input.data( "autocomplete" )._renderItem = function( ul, item ) {
					return $( "<li></li>" )
						.data( "item.autocomplete", item )
						.append( "<a>" + item.label + "</a>" )
						.appendTo( ul );
				};

				$( "<a>" )
					.attr( "tabIndex", -1 )
					.attr( "title", "Show All Items" )
					.appendTo( wrapper )
					.button({
						icons: {
							primary: "ui-icon-triangle-1-s"
						},
						text: false
					})
					.removeClass( "ui-corner-all" )
					.addClass( "ui-corner-right ui-combobox-toggle" )
					.click(function() {
						// close if already visible
						if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
							input.autocomplete( "close" );
							return;
						}

						// work around a bug (likely same cause as #5265)
						$( this ).blur();

						// pass empty string as value to search for, displaying all results
						input.autocomplete( "search", "" );
						input.focus();
					});
			},

			destroy: function() {
				this.wrapper.remove();
				this.element.show();
				$.Widget.prototype.destroy.call( this );
			}
		});
	})( jQuery );

	// Init Combobox
	$(function() {
		$( "#staffList" ).combobox();
		//$( "#toggle" ).click(function() {
		//	$( "#staffList" ).toggle();
		//});
	});
	
	// Init datepickers
	$('#fromDate').datepicker({ 
		changeMonth: true,
		changeYear: true,
		buttonText: '...',
		buttonImageOnly: true,
		buttonImage: '/HRMT/templates/images/calendar.gif',
		showOn: 'both',
		"onSelect": function(date) {
	      minDateFilter = new Date(date).getTime();
	      //oTable.fnDraw();
	      //alert(minDateFilter);
	    }
	}).addClass( "ui-state-default ui-datepick-input" )
	.keyup( function () {
	      minDateFilter = new Date(this.value).getTime();
	      //oTable.fnDraw();
	});
	  
	$('#toDate').datepicker({ 
		changeMonth: true,
		changeYear: true,
		buttonText: '...',
		buttonImageOnly: true,
		buttonImage: '/HRMT/templates/images/calendar.gif',
		showOn: 'both',
		"onSelect": function(date) {
	      maxDateFilter = new Date(date).getTime();
	      //oTable.fnDraw();
	      //alert(minDateFilter);
	    }
	}).addClass( "ui-state-default ui-datepick-input" )
	.keyup( function () {
	      maxDateFilter = new Date(this.value).getTime();
	      //oTable.fnDraw();
	});
	
	// View button click handle
	$(document).ready(function() {
		// Handle button view training click event
		$('#viewTrainingButton').click (function() 
		{	
			//Get the data from all the fields
	        var staffid = $('select[name=staffList]').val();
	        //var fromdate = $('input[name=fromDate]').val();
	        //var todate = $('input[name=toDate]').val();
	        
	        // Start filter
	        oTable.fnFilter(staffid, 0);
	        //oTable.fnFilter(fromdate, 9);
	        //oTable.fnFilter(todate, 10);
	        //oTable.fnReloadAjax();
			/*
			//organize the data properly
						var data = 'Staff_ID=' + staffid + '&FromDate=' + fromdate + '&ToDate=' + todate;
												  //start the ajax
						$.ajax({
							//this is the php file that processes the data
							url: "<?php echo base_url()?>training/viewindividual",
														  //POST method is used
							type: "POST",
											  //pass the data        
							data: data,    
														  //Do not cache the page
							cache: false,
			
							//success
							success: function () {
								//alert("ok");
								// Re-draw the table
								//oTable.fnReloadAjax();
								//alert("oTable");       
							},
							error: function(jqXHR, textStatus, errorThrown){
								var rawMessage = jqXHR.responseText;
								var message = rawMessage.substring(rawMessage.indexOf("<p>") + 3, rawMessage.indexOf("</p>"));
								if (message != null || message.length >0)
									alert(message);
							}
						});*/
			
			
	         
	        //cancel the submit button default behaviours
	        return false;
		} );
	});
</script>

<style>
	.ui-combobox {
		position: relative;
		display: inline-block;
	}
	.ui-combobox-toggle {
		position: absolute;
		top: 0;
		bottom: 0;
		margin-left: -1px;
		padding: 0;
		/* adjust styles for IE 6/7 */
		*height: 1.7em;
		*top: 0.1em;
	}
	.ui-combobox-input {
		margin: 0;
		padding: 0.3em;
		width: 400px;
	}
	.ui-datepick-input{
		margin: 0;
		padding: 0.3em;
	}
</style>